
<template>
    <div>
      <el-dialog
        :title="idList.length>0?'批量设置告警模式开关':'设置告警模式开关'"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="closeDialog"
        :close-on-click-modal="false"
        :append-to-body="true"
      >
        <el-form
          :model="editForm"
          ref="refForm"
          label-width="100px"
        >
          <el-form-item size="small" label="告警模式开关" >
            <el-checkbox-group v-model="editForm.notifyType">
              <el-checkbox label="开门告警" text-color="#ff00ff"></el-checkbox>
              <el-checkbox label="关门告警"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { reqBatchDoorSwitch } from "@/api/api";
  export default {
    props: {
      deviceInfo: {
        type: Object,
        default: () => {},
      },
      idList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        dialogVisible: false,
        editForm: {
            idList: [],
          notifyType: [],
        },
      };
    },
    computed: {  },
    watch: {
      deviceInfo(val) {
        // console.log(val);
        this.editForm.idList =[val.id];
        this.editForm.notifyType = [
          val.openDoor ? "开门告警" : "",
          val.closeDoor ? "关门告警" : "",
        ];
      },
    },
    methods: {
      // 点击确定
      submit() {
        this.$refs.refForm.validate(async (valid) => {
          if (!valid) return ;
          if(this.idList.length>0){
            let params = {
                idList:this.idList,
                openDoor:this.editForm.notifyType.indexOf("开门告警") !== -1 ? 1 : 0,
                closeDoor:this.editForm.notifyType.indexOf("关门告警") !== -1 ? 1 : 0,
            };
            const res = await reqBatchDoorSwitch(params);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.$modal.notifySuccess("批量设置告警模式开关成功");
            this.$parent.clearSelections();//清空复选框
          }else{
            let { idList, notifyType } = this.editForm;
            let openDoor = notifyType.indexOf("开门告警") !== -1 ? 1 : 0;
            let closeDoor = notifyType.indexOf("关门告警") !== -1 ? 1 : 0;
            let params = {
                idList,
                openDoor,
                closeDoor,
            };
            const res = await reqBatchDoorSwitch(params);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.$modal.notifySuccess("设置告警模式开关成功");
          }
        this.closeDialog();
        this.$parent.getDataList();
        });
      },
      // 点击关闭弹框
      closeDialog() {
        this.dialogVisible = false;
        this.editForm= {
            idList: [],
          notifyType: [],
        }
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  @import url("../../../common.less");
  
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
  ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #7367f0 !important;
    border: 1px solid #7367f0 !important;
  }
  ::v-deep .el-checkbox__inner:hover {
    border-color: #7367f0;
  }
  ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #7367f0;
  }
  ::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #7367f0 !important;
  }
  </style>